<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        h4{
            color: red;
        }
        #d1 {
            width: 100px;
            height: 100px;
            background-color: #ff7300;
            border: 5px solid red;
        }
        .q3{color: aliceblue}
        .q22{
            background-color: #06376d;
        }
        .q12{
            background-color: #11fba1;
        }
    /*    伪类选择器 选中元素的某种状态
    hover 悬停在上面时的状态
    active 选中时的状态
    link 未被访问时的状态
    visited 访问过时的状态*/


        a:link{color: #52443a
        }
        a:visited{color: #eb3f73
        }
        a:hover{color: #ff7300}
    /*    并列选择器 全部满足才生效*/
        div:hover{color: #ea6d93
        }
        a:active{color: #33e8e2
        }
    /*    群组选择器 满足其一就行*/
        h4,d1,.q12{border: 5px solid red;
        }
    /*    后代选择器*/
        #d2 span{color: #ca07f6
        }
    /*    直接子代选择器*/
        #d2>div>p>span{color: #06376d}
    </style>
</head>
<body>
<div id="d1">   我是一个div</div>
<div>   我是一个div</div>
<p> 我是一个是一个</p>
<h4> 我是一个h4</h4>
<h4> 我是一个h4</h4>
<span class="q12 q3"> 我是一个span</span>
<span class="q12 q3"> 我是一个span</span>
<span class="q12 q3"> 我是一个span</span>
<span class="q22 q3"> 我是一个span</span>
<span class="q22 q3"> 我是一个span</span>
<span class="q22 q3"> 我是一个span</span>
<hr>
<a href="https://www.baidu.com">链接1</a>
<a href="123">链接2</a>
<hr>
<div id="d2">
    <span>111</span>
    <div>
        <span>222</span>
        <p>333</p>
        <p>444 <span>555</span></p>
    </div>
</div>
</body>
</html>